<template>
    <div class="user-increase">
    <div class="user-count user-common-flex">
       <div class="pt20 pb20">
           <p class="fs20 color-00aeff">{{totalData.userCount}}</p>
           <p class="mt10 color-6d727a">注册用户数</p>
       </div>
       <div class="pt20 pb20 user-common-flex">
            <dl class="flex">
             <dd class="fs20 color-00aeff">{{totalData.rechargeCount}}</dd>
             <dd class="mt10 color-6d727a">充值数</dd>
           </dl>
           <dl class="flex">
                <dd class="fs20 color-00aeff">{{(totalData.rechargeCount/totalData.userCount).toFixed(2)*100}}%</dd>
             <dd class="mt10 color-6d727a">充值率</dd>
           </dl>
       </div>
      
       <div class="pt20 pb20 user-common-flex">
           <dl class="flex">
             <dd class="fs20 color-00aeff">{{totalData.smsUserCount}}</dd>
             <dd class="mt10 color-6d727a">短信开通数</dd>
           </dl>
           <dl class="flex">
                <dd class="fs20 color-00aeff"> {{(totalData.smsUserCount/totalData.userCount).toFixed(4)*100}}%</dd>
             <dd class="mt10 color-6d727a">短信开通率</dd>
           </dl>
       </div>
      <div class="pt20 pb20 user-common-flex">
           <dl class="flex">
             <dd class="fs20 color-00aeff">{{totalData.rechargeMoney}}</dd>
             <dd class="mt10 color-6d727a">充值总额</dd>
           </dl>
           <dl class="flex">
                <dd class="fs20 color-00aeff">{{(totalData.rechargeMoney/totalData.userCount).toFixed(4)*100}}%</dd>
             <dd class="mt10 color-6d727a">平均充值额</dd>
           </dl>
       </div>
    </div>
        <user-chart></user-chart>
        <price-chart></price-chart>
        <register-chart></register-chart>
    </div>
</template>

<script>
import userChart from "./UserChart";
import priceChart from "./PriceChart";
import registerChart from "./RegisterChart";
import service from "@/service/index_c";
export default {
  data() {
    return {
      totalData: {}
    };
  },
  mounted() {
    this.queryServerDataTotal();
  },
  methods: {
    async queryServerDataTotal() {
      let res = await service.haiheiServerDataTotal();
      if (res.success) {
        this.totalData = res.result;
      }
    }
  },
  components: {
    userChart,
    priceChart,
    registerChart
  }
};
</script>

<style scoped>
.user-common-flex {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.user-count > div {
  width: 24.5%;
  background: #fff;
}
</style>